<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 40px;
        width: 200px;
        background-color: red;
        margin: 100px auto;
      }
      .tip {
        position: fixed;
        padding: 20px;
        border-radius: 5px;
        background-color: #ccc;
        border: 1px solid blue;
        transition: opacity 0.3s;
      }
    </style>
  </head>
  <body>
    <div class="box">222</div>
    <script>
      let box = document.querySelector(".box");
      let tip = document.querySelector(".tip");
      let index = 5;
      box.onmouseenter = function (e) {
        index++;
        let allTips = document.querySelectorAll('[class*="tool-tip-"]');
        console.log(allTips);
        let ph = box.offsetTop;
        let pw = box.offsetLeft;
        let rh = box.clientHeight;
        let rw = box.clientWidth;
        tip = document.createElement("div");
        tip.style.opacity = 0;
        tip.setAttribute("attr", "1");
        document.querySelector("body").appendChild(tip);
        setTimeout(() => {
          tip.className = "tip tool-tip-" + index;
          tip.style.top = ph + "px";
          tip.style.left = pw + rw / 2 + "px";
          tip.style.transform = "translateY(-100%)";
          tip.innerHTML = "111";
          tip.style.opacity = 1;
        }, 0);
        console.log(ph, pw, rh, rw);
      };
      box.onmouseleave = function () {
        tip.style.opacity = 0;
        setTimeout(() => {
          tip.style.display = "none";
        }, 300);
      };
    </script>
  </body>
</html>
/* 知识点 1.tooltip
如何让插入body的tip元素准确定位到鼠标移入盒子的正上方中间位置
获取鼠标移入元素的盒子的offsetTop offsetWidth clientHeight clientWidth
通过这四个元素来计算tip的定位位置 2.如何制作动态创建元素节点淡入淡出的过度效果
元素创建出来以后 先给透明度为0 将元素插入到body中 在进行异步操作 将透明度设为1
3. 如何获取相似类名的dom 如tool-tip-2013 tool-tip-2014 ....
可以使用document.querySelectAll('[class*=tool-tip-]') **/
